<style scoped>
#aTime {
  color: rgb(255, 255, 255);
  float: left;
  font-size: 18px;
  text-align: center;
  width: 100%;
}

#Tradion {
  width: 64px;
  height: 64px;
  border: 2px solid rgb(19, 162, 194);
  border-radius: 60px;
  margin: 10px;
}

#hours {
  width: 22px;
  height: 2px;
  margin: 29px 31px;
  background: rgb(19, 162, 194);
  transform-origin: left bottom;
}

#minutes {
  width: 27px;
  height: 2px;
  background: rgb(19, 162, 194);
  margin: -32px 33px;
  transform-origin: left bottom;
  transform: rotate(0deg);
}

.tran {
  transform: rotate(-90deg);
}

#dian {
  width: 5px;
  height: 5px;
  border-radius: 6px;
  background: rgb(19, 162, 194);
  margin: 30px 30px;
}

#aDate,
#week {
  color: #fff;
  padding-top: 50px;
}
</style>

<template>
  <div style="width:100%;">
    <div id="Tradion" style="margin:0 auto;">
      <div id="hours" class="tran"></div>
      <div id="minutes" class="tran"></div>
      <!-- <div id="seconds" class="tran"></div> -->
      <div id="dian"></div>
    </div>
    <div id="aTime" style="margin:0 auto;"></div>
  </div>
</template>




<script>
export default {
  data() {
    return {
      timeer1: "",
      timeer2: ""
    }
  },
  // 进入页面加载数据
  activated() {
    this.init();
  },
  //离开页面销毁定时器 
  deactivated(){
    this.cleartime();
  },
  methods: {
    init() {
      this.times();
      this.Ttranform();
      this.timeer1 = setInterval(this.times, 60000);
      this.timeer2 = setInterval(this.Ttranform, 60000);
    },
    addzero(num) {
      if (num >= 10) {
        return "" + num;
      } else {
        return "0" + num;
      }
    },
    times() {
      var date = new Date();
      var aTime = document.getElementById('aTime');
      var str = this.addzero(date.getHours()) + ":" + this.addzero(date.getMinutes());
      aTime.innerHTML = str;
    },
    Ttranform() {
      var date = new Date();
      var hours = document.getElementById('hours');
      var minutes = document.getElementById('minutes');
      // var seconds = document.getElementById('seconds');
      var num = date.getHours();
      var num2 = date.getMinutes();
      // var num3 = date.getSeconds();
      hours.style.transform = "rotate(" + (num * 30 - 90) + "deg)";
      minutes.style.transform = "rotate(" + (num2 * 6 - 90) + "deg)";
      // seconds.style.transform = "rotate(" + (num3 * 6 - 90) + "deg)";

    },
    cleartime() {
      clearInterval(this.timeer1);
      clearInterval(this.timeer2);
    }
  }

}
</script>